<template>
    <view class="login">
        <view class="login-main">
            <view class="login-logo">
                <image src="@/static/logo.png" @click="navBack" mode="aspectFill"></image>
            </view>
            <view>
                <button type="primary" open-type="getUserInfo" plain="true" @getuserinfo="wxlogin">微信登录</button>
            </view>
        </view>
    </view>
</template>


<script>
  import {
    mapMutations,
  } from 'vuex'

  import { checkPhone } from '@/utils/index'

  import { getCode, dologin, oauth } from '@/api/user'
  export default {
    data () {
      return {
      }
    },
    onLoad () {
    },
    methods: {
      ...mapMutations(['login']),
      navBack () {
        console.log('gogo')
        uni.switchTab({
          url: `/pages/index/index`,
        })
      },
      async wxlogin (res) {
        console.log(res.detail)
        let that = this
        let params=JSON.parse(res.detail.rawData)
        uni.getProvider({
          service: 'oauth',
          success: function (res) {
            console.log(res.provider)
            if (~res.provider.indexOf('weixin')) {
              uni.login({
                provider: 'wechat',
                success: function (loginRes) {
                  if (that.server._isEmpty(loginRes.code)) {
                    return
                  }
                  params.code=loginRes.code
                  oauth(params, function (result) {
                    that.server.msg(result.data.msg)
                    if (parseInt(result.data.status) === 1) {
                      that.login(result.data.result)
                      uni.switchTab({
                        url: `/pages/user/user`,
                      })
                    }
                  })
                },
              })
            }
          },
        })
      },
    },
  }
</script>


<style lang="scss">
    page {
        background-color: #FFFFFF;

    }

    .flex {
        display: flex;
    }

    .login {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .login-main {
        flex: 1;
        padding: 0 70upx;

        .login-logo {
            width: 248upx;
            height: 242upx;
            padding-bottom: 50upx;
            margin: 200upx auto 0 auto;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .logo-tip {
            text-align: center;
            padding-top: 25upx;
            font-size: 32upx;
            font-weight: 200;
            color: rgba(51, 51, 51, 1);
            padding-bottom: 50upx;
        }
        .login-list {
            margin-top: 35upx;
            height: 100upx;
            align-items: center;
            padding: 0 30upx;

            &.border-all {
                &:after {
                    border: 1px solid #D0D0D0;
                    border-radius: 100upx;
                }
            }

            .iconfont {
                width: 65upx;
                font-size: 44upx;
                align-items: center;

                &:after {
                    margin-left: 20upx;
                    content: '';
                    width: 2upx;
                    height: 35upx;
                    background: #D0D0D0;
                    display: block;
                }
            }

            .login-input {
                flex: 1;

                input {
                    font-size: 28upx;
                    color: #333333;
                    padding-left: 20upx;
                }
            }

            .code-sx {
                content: '';
                width: 2upx;
                height: 25upx;
                background: #D0D0D0;
                margin-right: 25upx;
            }

            .codeimg {
                font-size: 24upx;
                color: #999999;
            }
        }

        .login-btn {
            margin-top: 70upx;
            height: 96upx;
            width: 100%;
            background: linear-gradient(-90deg, #fa436a, #fa436a);
            border-radius: 47upx;
            font-size: 34upx;
            color: #ffffff;
        }

        .login-tip {
            padding-top: 26upx;
            font-size: 22upx;
            color: #666666;
            text-align: center;

            navigator {
                margin-left: 10upx;
                display: inline-block;
                color: #fa436a;
            }
        }
    }

    .login-footer {
        padding: 0 70upx;

        .footer-tip {
            align-items: center;
            font-size: 24upx;
            color: #999999;
            text-align: center;

            &:before {
                flex: 1;
                content: '';
                height: 2upx;
                background: #D0D0D0;
                margin-right: 30upx;
            }

            &:after {
                margin-left: 30upx;
                flex: 1;
                content: '';
                height: 2upx;
                background: #D0D0D0;
            }

        }

        .footer-other {
            padding: 40upx 0 100upx 0;
            justify-content: center;

            .other-list {
                width: 80upx;
                height: 80upx;
                margin: 0 75upx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .wechat{
        background-image: url("../../static/ic-weixin@2x.png");
        background-size: 100%;
    }
</style>
